<template>
  <a-popover trigger="click" class="user-pop" :autoAdjustOverflow="false" placement="bottom" :align="{ offset: [0, -20] }" :getPopupContainer="(el) => el">
    <template slot="content">
      <router-link :to="{ name: 'User' }" class="item">个人中心</router-link>
      <!-- <router-link :to="{ name: 'SingleSign' }" class="item">单点登陆</router-link> -->
      <a href="javascript:;" class="item" @click="logout">退出登录</a>
    </template>
    <div class="name">{{ currentUser.nickName }}, 您好</div>
    <div class="arrow"></div>
  </a-popover>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import { Popover } from "ant-design-vue";

@Component({
  name: "CUser",
  components: {
    APopover: Popover
  }
})
export default class CUser extends Base {
  private created() {
    // undo
  }

  private logout() {
    this._confirm({
      content: "确定退出？",
      onOk: () => {
        this._logout();
      }
    });
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.user-pop {
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  height: 100%;
  .arrow {
    .scale(width, 16px);
    .scale(height, 16px);
    background: url("~@/assets/images/img-1.png") center center no-repeat;
    background-size: contain;
  }
  .name {
    margin-right: 4px;
  }

  .item {
    padding: 5px 12px;
    display: block;
    cursor: pointer;
    border-radius: 2px;
    &:hover {
      background-color: #eff4fe;
    }
  }

  /deep/.ant-popover {
    .ant-popover-inner-content {
      padding: 5px;
    }
  }
}
</style>
